<template>
  <div v-if="configObj">
    <div class="mobile-page paddingBox">
      <div class="big-small-page">
        <template>
          <div>
            <div class="top-title" :style="topBgColor" v-if="isShowTitle">
              <div style="display: flex;align-items: center;">
                <div :style="topTitleColor">{{ configObj.titleConfig.val }}</div>
                <div style='margin-left: 20px;' :style="descColor">{{ configObj.descContent.val }}</div>
              </div>
              <button class="btn">更多 ></button>
            </div>
            <!-- 一大图 -->
            <div class="item" v-for="item in configObj.menuBigConfig.list">
              <div class="img-box">
                <div v-if="item.img" style="height: 140px; width: 100%">
                  <img :src="item.img" alt=""
                    style="height: 100%; width: 100%; object-fit: cover; border-radius: 10px" />
                </div>
                <div v-else class="empty-box" style="height: 120px"><span class="iconfont icon-tu"></span></div>
                <span class="time" :style="moviesTimeColor">{{ configObj.menuBigConfig.list[0].duration }}</span>
              </div>
              <div class="info">
                <div class="hd acea-row">
                  <div class="title line-title" style="text-align: center;" :style='moviesTitleColor'>{{ item.info[0].value
                  }}</div>
                  <div :style="moviesDescColor" class="desc-title">{{ item.info[2].value }}</div>
                </div>
              </div>
            </div>
            <!-- 2小图 -->
            <div class="list-wrapper listC" style="gap: 10px">
              <div class="item auto" v-for="(item, index) in configObj.menuSmallConfig.list">
                <div class="img-box">
                  <div v-if="item.img" style="height: 100px; width: 100%">
                    <img :src="item.img" alt=""
                      style="height: 100%; width: 100%; object-fit: cover; border-radius: 10px" />
                  </div>
                  <div v-else class="empty-box" style="height: 100px"><span class="iconfont icon-tu"></span> </div>
                </div>
                <div class="info">
                  <div class="hd acea-row">
                    <span class="title line-desc" style="text-align: center;" :style='moviesTitleColor'>{{
                      item.info[0].value }}</span>
                    <div :style="moviesDescColor" class="desc">{{ item.info[2].value }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'big_small_img',
  cname: '大小图',
  configName: 'c_big_small_img',
  icon: 't-icon-zujian-shangpinliebiao',
  type: 0, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'big_small', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray']),
    //最外层盒子的样式
    // boxStyle() {
    //     return [
    //         { 'border-radius': this.configObj.bgStyle.val ? this.configObj.bgStyle.val + 'px' : '0' },
    //         {
    //             background: `linear-gradient(${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,
    //         },
    //         { margin: this.configObj.mbConfig.val + 'px' + ' ' + this.configObj.lrConfig.val + 'px' + ' ' + 0 },
    //         { padding: this.configObj.upConfig.val + 'px' + ' ' + '8px' + ' ' + this.configObj.downConfig.val + 'px' },
    //     ];
    // },
    // 标签内容样式
    titleColor() {
      return {
        // color: this.configObj.titleColor.color[0].item,
        // border: `1px solid ${this.configObj.titleColor.color[0].item}`,
        border: `1px solid #666666`,
        'border-radius': this.configObj.contentStyle.val ? this.configObj.contentStyle.val + 'px' : '0',
        padding: this.configObj.upConfig.val + 'px' + ' ' + 0 + ' ' + this.configObj.downConfig.val + 'px',
        margin: this.configObj.lrConfig.val + 'px',
      };
    },
    // 电影时长颜色
    moviesTimeColor() {
      return {
        color: this.configObj.moviesTimeColor.color[0].item,
        // 'line-height': this.configObj.moviesDescFont.val + 'px',
        // 'font-size': this.configObj.moviesDescFont.val + 'px',
        // 'font-weight': this.configObj.moviesDescFontWeight.val,
        // margin: 5 + 'px' + ' ' + 0 + ' ' + 0 + ' ' + 0,
      };
    },
    // 电影描述颜色
    moviesDescColor() {
      return {
        color: this.configObj.moviesDescColor.color[0].item,
        'line-height': this.configObj.moviesDescFont.val + 'px',
        'font-size': this.configObj.moviesDescFont.val + 'px',
        'font-weight': this.configObj.moviesDescFontWeight.val,
        margin: 5 + 'px' + ' ' + 0 + ' ' + 0 + ' ' + 0,
      };
    },
    // 电影标题颜色
    moviesTitleColor() {
      return {
        color: this.configObj.moviesTitleColor.color[0].item,
        'line-height': this.configObj.moviesTitleFont.val + 'px',
        'font-size': this.configObj.moviesTitleFont.val + 'px',
        'font-weight': this.configObj.moviesTitleFontWeight.val,
      };
    },
    // 描述文本颜色
    descColor() {
      return {
        color: this.configObj.descColor.color[0].item,
        'line-height': this.configObj.descFontConfig.val + 'px',
        'font-size': this.configObj.descFontConfig.val + 'px',
      };
    },
    // 顶部标题文字颜色
    topTitleColor() {
      return {
        color: this.configObj.topTitleColor.color[0].item,
        'font-weight': this.configObj.fontWeightConfig.val,
        'font-size': this.configObj.titleFontConfig.val + 'px',
        padding: this.configObj.upConfig.val + 'px' + ' ' + 0,
      };
    },
    // 顶部标题背景颜色
    topBgColor() {
      return {
        // background: linear-gradient(${this.configObj.topBgColor.color[0].item}, ${this.configObj.topBgColor.color[1].item}),//从上到下
        background: `linear-gradient(to right, ${this.configObj.topBgColor.color[0].item}, ${this.configObj.topBgColor.color[1].item})`,//从左到右
        padding: this.configObj.upConfig.val + 'px',
        // margin: this.configObj.lrConfig.val + 'px',
      };
    },
    //价格颜色
    priceColor() {
      return { color: this.configObj.priceColor.color[0].item };
    },
    //已售数量
    soldColor() {
      return { color: this.configObj.soldColor.color[0].item };
    },
    //商品标题颜色
    titleColor() {
      return { color: this.configObj.titleColor.color[0].item };
    },
    //内容圆角
    contentStyle() {
      return { 'border-radius': this.configObj.contentStyle.val ? this.configObj.contentStyle.val + 'px' : '0' };
    },
    //商品名称
    titleShow() {
      if (this.configObj.typeConfig.activeValue.indexOf(0) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    //价格
    priceShow() {
      if (this.configObj.typeConfig.activeValue.indexOf(1) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    //销量
    soldShow() {
      if (this.configObj.typeConfig.activeValue.indexOf(2) !== -1) {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal);
      },
      deep: true
    },
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[nVal];
        this.setConfig(data);
      },
      deep: true
    },
    defaultArray: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[this.num];
        this.setConfig(data);
      },
      deep: true
    }
  },
  data() {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: 'big_small',
        timestamp: this.num,
        typeId: '',//某一类型的ID
        setUp: {
          tabVal: 0,
          cname: '大小图'
        },
        // 电影类型和更多链接
        topConfig: {
          tabTitle: '电影类型和更多链接',
          title: '电影类型和更多链接',
          val: '电影类型和更多链接',
          place: '请输入标题，限制10个字以内',
          max: 10,
          isShow: 1
        },
        // 电影类型
        titleConfig: {
          tabTitle: '文本标题',
          title: '电影类型',
          val: '类型',
          activeValue: '类型',
          isMultiple: false,
          list: [
            // {
            //   name: '战争片',
            //   _id: '1'
            // },
            // {
            //   name: '短剧',
            //   _id: '2'
            // },
            // {
            //   name: '喜剧片',
            //   _id: '3'
            // },
            // {
            //   name: '动作片',
            //   _id: '4'
            // }
          ],
          place: '请输入标题，限制10个字以内',
          max: 10,
          isShow: 1
        },
        // 更多链接
        linkConfig: {
          title: '更多链接',
          val: '',
          isDisabled: true,
          place: '请输入链接地址',
          max: 100,
          isShow: 1
        },
        // -------------------------------------
        // 电影时长颜色
        moviesTimeColor: {
          title: '时长颜色',
          tabTitle: '电影时长颜色设置',
          color: [
            {
              item: '#999999',
            },
          ],
          default: [
            {
              item: '#282828',
            },]
        },
        // 电影描述颜色
        moviesDescColor: {
          title: '文本颜色',
          tabTitle: '电影描述设置',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },]
        },
        // 电影描述字号
        moviesDescFont: {
          tabTitle: '文本字号',
          title: '文本字号',
          val: 10,
          min: 8,
          max: 20,
        },
        // 电影描述粗细
        moviesDescFontWeight: {
          tabTitle: '文本粗细',
          title: '文本粗细',
          val: 100,
          min: 100,
          max: 600,
        },
        // 电影标题颜色
        moviesTitleColor: {
          title: '标题颜色',
          tabTitle: '电影标题设置',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },]
        },
        // 电影标题字号
        moviesTitleFont: {
          tabTitle: '标题字号',
          title: '标题字号',
          val: 16,
          min: 12,
          max: 20,
        },
        // 电影标题粗细
        moviesTitleFontWeight: {
          tabTitle: '标题粗细',
          title: '标题粗细',
          val: 300,
          min: 100,
          max: 600,
        },
        // 是否展示标题
        isShowTitleConfig: {
          title: '显示标题',
          tabTitle: '展示设置',
          tabVal: 1,
          isShow: 1,
          list: [
            {
              val: '否',
              icon: '',
            },
            {
              val: '是',
              icon: '',
            },
          ],
        },
        // 标题输入值
        titleContent: {
          title: '标题',
          tabTitle: '标题设置',
          val: '标题',
          place: '请输入标题',
          max: 100,
          isShow: 1
        },
        // 文本描述输入值
        descContent: {
          title: '描述文本',
          tabTitle: '描述文本设置',
          val: '描述文本',
          place: '请输入描述文本',
          max: 100,
          isShow: 1
        },
        // 标题文字大小
        titleFontConfig: {
          tabTitle: '标题字号',
          title: '标题字号',
          val: 16,
          min: 12,
          max: 20,
        },
        // 标题文字加粗
        fontWeightConfig: {
          tabTitle: '标题粗细',
          title: '标题粗细',
          val: 300,
          min: 100,
          max: 600,
        },
        // 标题文字颜色
        topTitleColor: {
          title: '标题颜色',
          name: 'topTitleColor',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },
          ],
        },
        // 标题背景颜色
        topBgColor: {
          title: '标题背景色',
          name: 'topBgColor',
          color: [
            {
              item: '#cacaca',
            },
            {
              item: '#fff',
            },
          ],
          default: [
            {
              item: '#cacaca',
            },
            {
              item: '#fff',
            },
          ],
        },
        // 描述文本字号大小
        descFontConfig: {
          tabTitle: '文本大小',
          title: '文本大小',
          val: 12,
          min: 8,
          max: 20,
        },
        // 描述文本颜色
        descColor: {
          tabTitle: '描述文本设置',
          title: '描述文本设置',
          name: 'descColor',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },
          ],
        },
        // -------------------------------------
        //电影大图标题
        bigTitle: {
          title: '展示信息',
          tabTitle: '电影大图',
          name: 'bigConfig'
          // activeValue: [0, 1, 2],
          // list: [
          //     {
          //         val: '商品名称',
          //     },
          //     {
          //         val: '商品价格',
          //     },
          //     {
          //         val: '已售数量',
          //     },
          // ],
        },
        //电影小图标题
        smallTitle: {
          title: '展示信息',
          tabTitle: '电影小图',
          name: 'smallConfig'
          // activeValue: [0, 1, 2],
          // list: [
          //     {
          //         val: '商品名称',
          //     },
          //     {
          //         val: '商品价格',
          //     },
          //     {
          //         val: '已售数量',
          //     },
          // ],
        },

        // 大图
        menuBigConfig: {
          tabTitle: '内容设置',
          title: '',
          maxList: 100,
          typeName:'',
          list: [
            {
              img: '',
              // typeName:'',
              info: [
                {
                  title: '标题',
                  value: '影片0',
                  tips: '选填，不超过20个字',
                  max: 20,
                  status: true,
                  video: ''
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                  video: ''
                },
                {
                  title: '描述',
                  value: '描述文本',
                  tips: '请输入描述文本',
                  max: 300,
                  status: true,
                  video: ''
                },
              ],
              duration: '60分钟',
              desc: '',
              status: true
            },
          ],
          typeId: '',//某一类型的ID
          //某一类型的所有电影
          typeTableList: [],
          typeTableParams: {}
        },
        // 小图
        menuSmallConfig: {
          tabTitle: '内容设置',
          title: '',
          maxList: 100,
          typeName:'',
          list: [
            {
              img: '',
              // typeName:'',
              info: [
                {
                  title: '标题',
                  value: '影片1',
                  tips: '选填，不超过20个字',
                  max: 20,
                  status: true,
                  video: ''
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                  video: ''
                },
                {
                  title: '描述',
                  value: '描述文本',
                  tips: '请输入描述文本',
                  max: 300,
                  status: true,
                  video: ''
                },
              ],
              status: true
            },
            {
              img: '',
              // typeName:'',
              info: [
                {
                  title: '标题',
                  value: '影片2',
                  tips: '选填，不超过20个字',
                  max: 20,
                  status: true
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true
                },
                {
                  title: '描述',
                  value: '描述文本',
                  tips: '请输入描述文本',
                  max: 300,
                  status: true,
                  video: ''
                },
              ],
              status: true
            }
          ],
          typeId: '',//某一类型的ID
          //某一类型的所有电影
          typeTableList: [],
          typeTableParams: {}
        },
        numConfig: {
          val: 6,
          isShowNum: false,
          max: 50
        },
        // 背景颜色
        bgColor: {
          tabTitle: '类型标题设置',
          title: '背景颜色',
          color: [
            {
              item: 'rgba(255, 255, 255, 0)'
            },
            {
              item: 'rgba(255, 255, 255, 0)'
            }
          ],
          default: [
            {
              item: 'rgba(255, 255, 255, 0)'
            },
            {
              item: 'rgba(255, 255, 255, 0)'
            }
          ]
        },
        titleColor: {
          title: '商品标题颜色',
          name: 'titleColor',
          color: [
            {
              item: '#282828'
            }
          ],
          default: [
            {
              item: '#282828'
            }
          ]
        },
        priceColor: {
          title: '价格颜色',
          name: 'priceColor',
          default: [
            {
              item: '#e93323'
            }
          ],
          color: [
            {
              item: '#e93323'
            }
          ]
        },
        soldColor: {
          title: '已售数量颜色',
          name: 'labelColor',
          color: [
            {
              item: '#666'
            }
          ],
          default: [
            {
              item: '#666'
            }
          ]
        },
        bgStyle: {
          tabTitle: '圆角设置',
          title: '背景圆角',
          name: 'bgStyle',
          val: 0,
          min: 0,
          max: 30
        },
        contentStyle: {
          title: '内容圆角',
          name: 'contentStyle',
          val: 7,
          min: 0,
          max: 30
        },
        // 上间距
        upConfig: {
          title: '上边距',
          tabTitle: '边距设置',
          val: 6,
          min: 0,
          max: 100
        },
        // 下间距
        downConfig: {
          tabTitle: '边距设置',
          title: '下边距',
          val: 6,
          min: 0
        },
        // 左右间距
        lrConfig: {
          title: '左右边距',
          val: 12,
          min: 0,
          max: 15
        },
        mbConfig: {
          title: '顶部间距',
          val: 10,
          min: 0
        },
        contentConfig: {
          title: '内容间距',
          val: 10,
          min: 0,
          max: 20
        },
        // productList: {
        //   title: '商品列表',
        //   list: []
        // },
        // goodsList: {
        //   max: 20,
        //   list: [],
        //   isShow: 1
        // },
        bigList: [],
        smallList: []
      },
      configObj: null,
      contentConfig: '', //内容间距
      navlist: [],
      imgStyle: '',
      txtColor: '',
      slider: '',
      tabCur: 0,
      list: [],
      isShowTitle: 1,
      pageData: {},
      itemStyle: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.num) {
        this.pageData = this.$store.state.mobildConfig.defaultArray[this.num];
        this.setConfig(this.pageData);

      }
    });
  },
  methods: {
    setConfig(data) {
      if (!data) return;
      if (data) {
        this.configObj = data;
        // this.itemStyle = data.itemStyle.tabVal || 0;
        this.contentConfig = data.contentConfig.val || 0;
        this.slider = data.mbConfig.val;
        this.isShowTitle = data.isShowTitleConfig.tabVal;
      }
    },

    arrayChunk(arr) {
      this.leftList = [];
      this.rightList = [];
      for (let i = 0; i < arr.length; i++) {
        if (i % 2 == 0) {
          this.leftList.push(arr[i]);
        } else {
          this.rightList.push(arr[i]);
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
.img-box {
  position: relative;

  .time {
    position: absolute;
    bottom: 8px;
    right: 17px;
    // color: #999999;
  }
}

.acea-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auto {
  width: auto !important;
}

.top-title {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sold {
  font-size: 11px;
  margin-top: 3px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;

  .btn {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 12px;
    border: 1px solid #ccc;
  }
}


.line-title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-desc {
  width: 155px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.paddingBox {
  // padding-bottom: 0;
  padding: 10px;
}

.big-small-page {
  .hd_nav {
    display: flex;
    height: 200px;
    padding: 0 5px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 25%;

      // .title {
      // font-size: 16px;
      // color: #282828;
      // background-color: red !important;
      // }

      .label {
        width: 62px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: transparent;
        border-radius: 8px;
        color: #999999;
        font-size: 12px;

        &.active {
          .title {
            color: #ff4444;
          }

          .label {
            color: #fff;
            background: linear-gradient(270deg, rgba(255, 84, 0, 1) 0%, rgba(255, 0, 0, 1) 100%);
          }
        }
      }
    }
  }

  .info {
    padding: 10px;

    .desc-title {
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .desc {
      text-align: center;
      width: 155px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .title {
      font-size: 13px;
      color: #282828;
      line-height: 21px;
    }

    .text {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .label {
      padding: 0 2px;
      border-radius: 2px;
      color: #fff;
      font-size: 9px;
      text-align: center;
      line-height: 16px;
      height: 15px;
      margin-right: 4px;
    }

    .coupon,
    .ship {
      padding: 0 5px;
      line-height: 13px;
      border-radius: 2px;
      font-size: 10px;
      margin-left: 3px;
    }

    .ship {
      color: #ff9000;
      border: 1px solid #ff9000;
    }

    .old-price {
      color: #aaa;
      font-size: 13px;
      text-decoration: line-through;
      margin-left: 3px;
    }

    .price {
      display: flex;
      align-items: center;
      margin-top: 3px;

      .num {
        font-size: 14px;

        span {
          font-size: 14px;
        }
      }

      .label {
        width: 16px;
        height: 18px;
        margin-left: 5px;
        text-align: center;
        line-height: 18px;
        font-size: 11px;

        &.on {
          margin-left: 0;
        }
      }
    }
  }

  .listC {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    width: 100%;
  }

  .list-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 48.5%;
      border-radius: 10px;

      .img-box {
        position: relative;
        width: 100%;
        height: 100px;

        img,
        .box {
          width: 100%;
          height: 100%;
        }

        .empty-box {
          background: #e6e9ed;
          border-radius: 10px;
        }

        .box {
          background: #d8d8d8;
        }
      }
    }

    &.itemA {
      .text {
        margin-top: 0 !important;
      }

      .item {
        display: flex;
        width: 100%;

        &:last-child {
          margin-bottom: 0 !important;
        }

        .img-box {
          position: relative;
          width: 110px;
          height: 110px;

          img,
          .box,
          .empty-box {}
        }

        .info {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          flex: 1;
          margin-left: 5px;
          padding: 5px 10px;

          .num {
            font-weight: bold;
          }
        }
      }
    }

    &.itemB {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      width: 100%;
      justify-content: inherit;

      .item {
        width: 31.6%;
        overflow: hidden;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .img-box {
          position: relative;
          width: 100%;
          height: 110px;
        }

        .price {
          display: block;
        }
      }
    }
  }
}
</style>
